<template>
  <el-watermark :font="font" :content="content" :zIndex="99999" v-bind="watermarkData">
    <el-watermark :font="font" :content="content" :zIndex="99999" v-bind="watermarkData1" class="h-[100%]">
      <router-view />
    </el-watermark>
  </el-watermark>
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings"
import { handleThemeStyle } from "@/utils/theme"
import socketStore from "@/store/modules/socket"
import { ElNotification } from "element-plus"
import useUserStore from "@/store/modules/user"

const font = reactive({ color: "rgba(0, 0, 0, 0)" })

const content = ref("")
const watermarkData = ref({})
const watermarkData1 = ref({})
const userData = useUserStore()
onMounted(() => {
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme)
    setTimeout(() => {
      if (import.meta.env.VITE_APP_ENV == "staging") {
        watermarkData.value = { width: 1800, height: 1200, rotate: 0, font: { fontSize: 100 } }
        content.value = "测试环境"
      } else {
        // 生产/本地 环境
        watermarkData.value = { gap: [500, 500], font: {} }
        content.value = [`${userData.name}${userData.realname}`, parseTime(new Date(), "{y}-{m}-{d} {h}:{i}")] || ""
      }

      let color = bastMode.value == "dark" ? "rgba(200,200,200, 0.1)" : "rgba(0,0,0, 0.1)"
      watermarkData.value.font = { ...watermarkData.value.font, color: color }
      let color1 = bastMode.value == "dark" ? "rgba(255,255,255,0.01)" : "rgba(0,0,0,0.01)"
      watermarkData1.value.font = { ...watermarkData1.value.font, color: color1 }
    }, 1000)
  })
})
// color: "rgba(0,0,0,0.01)",
import { parseTime } from "@/utils/ruoyi"
import appStore from "@/store/modules/app"
setInterval(() => {
  if (import.meta.env.VITE_APP_ENV == "staging") {
    content.value = "测试环境"
  } else {
    content.value = [`${userData.name}${userData.realname}`, parseTime(new Date(), "{y}-{m}-{d} {h}:{i}")]
  }
}, 36000)

const bastMode = computed(() => appStore().mode)
watch(
  () => bastMode.value,
  (val) => {
    let color = val == "dark" ? "rgba(200,200,200, 0.1)" : "rgba(0,0,0, 0.1)"
    watermarkData.value.font = { ...watermarkData.value.font, color: color }
    let color1 = val == "dark" ? "rgba(255,255,255,0.01)" : "rgba(0,0,0,0.01)"
    watermarkData1.value.font = { ...watermarkData1.value.font, color: color1 }
  }
)

const card_notice_message = computed(() => socketStore().card_notice_message)
const showNotification = (title) => {
  ElNotification({
    title: "通知",
    message: title,
    dangerouslyUseHTMLString: true,
  })
}
watch(
  () => card_notice_message.value,
  (val) => {
    console.log(card_notice_message.value)
    if (val) {
      showNotification(val.title)
    }
  }
)

//监听storage的currentUser
window.addEventListener('storage', (event) => {
  if (event.key === 'currentUser') {
    window.location.reload()
  }
})
// const iconList = []
// console.log(iconList)
// let iconData = {}
// iconList.forEach((item) => {
//   iconData[`.icon-${item.name}:before`] = { content: `\\${item.unicode}` }
// })
// console.log(JSON.stringify(iconData))
</script>
